<template>
	<view class="experienceCard_main" @click="clickExperienceCard">
		<!-- 标题 -->
		<text class="experienceCard_title">
			{{item.title}}
		</text>

		<!-- 个人信息和tags -->
		<view class="experienceCard_info">
			<view class="experienceCard_info_main">
				<image :src="item.icon" mode="" class="experienceCard_info_icon"></image>
				<view class="experienceCard_info_name">
					{{item.name}}
				</view>
				<view class="experienceCard_info_date">
					{{item.date}}
				</view>
			</view>
			<view class="experienceCard_info_tags">
				<ItemTag v-show="item.tags && item.tags.length > 0" v-for="data in item.tags" :item="data"
					:isGray="true" />
			</view>
		</view>

		<view class="experienceCard_desc">{{item.des}}</view>

		<!-- 图片 -->
		<view class="experienceCard_images">
			<image v-for="src in item.images" :src="src" mode=""></image>
		</view>

		<view style="width: 100%;margin-top: 20rpx;box-sizing: border-box;padding-right: 0 20rpx;">
			<iconview :redata="redata" />
		</view>


	</view>
</template>

<script>
	import ItemTag from "@/components/ItemTag.vue"
	import iconview from '@/components/iconview.vue'
	export default {
		name: "ExperienceCard",
		components: {
			ItemTag,
			iconview
		},
		data() {
			return {
				redata: {
					xhnum: '2.45w',
					xhis: true,
					bxhnum: '234',
					bxhs: false,
					plnum: '945',
					scnum: '334',
					scis: true
				}
			};
		},
		props: ["item"],
		methods: {
			clickExperienceCard: function() {
				uni.navigateTo({
					url: "../experiencedetails/experiencedetails",
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style>
	.experienceCard_main {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.experienceCard_info {
		width: 100%;
		display: flex;
		height: 50rpx;
		margin-top: 10rpx;
		justify-content: space-between;
	}

	.experienceCard_info_icon {
		width: 50rpx;
		height: 50rpx;
		min-width: 50rpx;
		border-radius: 50% 50%;
	}

	.experienceCard_info_main {
		width: 60%;
		display: flex;
		justify-content: space-around;
	}

	.experienceCard_info_name {
		display: inline-block;
		width: 200rpx;
		margin-left: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.experienceCard_info_date {
		width: 200rpx;
		font-size: 12px;
		color: #8f9199;
		height: 50rpx;
		line-height: 50rpx;
	}

	.experienceCard_info_tags {
		width: 40%;
		height: 50rpx;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-end;
	}

	.experienceCard_desc {
		margin-top: 10rpx;
		padding: 10rpx;
		font-size: 14px;
		color: #000000;
	}

	.experienceCard_images {
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
		justify-content: space-between;
		justify-content: flex-start;
		height: 260rpx;

	}

	.experienceCard_images>image {
		box-sizing: border-box;
		margin: 0 10rpx;
		width: 100%;
		max-width: 50%;
		height: 100%;
		min-height: 35%;
		max-height: 100%;
	}
</style>
